<script setup>
import { ref, onMounted } from 'vue'
import { CateGetListService } from '@/api/user.js'

defineProps({
  modelValue: {
    type: [Number, String],
  }
})
const emit = defineEmits(['update:modelValue'])

const cateList = ref()
const getCateList = async () => {
  const res = await CateGetListService()
  console.log(res)
  cateList.value = res.data.data
}
onMounted(async () => {
  getCateList()
})

</script>

<template>
<div class="select-container">
   <el-select
    :model-value="modelValue"
    @update:modelValue="emit('update:modelValue', $event)"
    placeholder="Select"
    size="large"
    style="width: 240px"
    >
    <el-option
      v-for="item in cateList"
      :key="item.id"
      :label="item.cate_name"
      :value="item.id"
    />
 </el-select>
</div>

</template>

<style scoped>
.select-container {
  display: flex;
  align-items: center;
  gap: 10px;
}
</style>
